<template>
  <div class="page503">
    <img :src="require('@/assets/503.png')" alt="">
    <h1>服务出错了</h1>
    <p class="caption-text">您访问的页面服务正在维护！<br>将在{{ time }}秒后返回主页</p>
    <router-link :to="{name:'home'}" replace>返回主页</router-link>
  </div>
</template>

<script>
let timer = null;
export default {
  name: 'Page503',
  data() {
    return {
      time: 5
    }
  },
  computed: {},
  watch: {},
  // 事件
  methods: {},
  mounted() {
    timer = setInterval(() => {
      this.time--
      if (this.time <= 0) {
        clearInterval(timer)
        this.$router.replace({name: 'home'})
      }
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(timer)
  }
}
</script>

<style lang="scss" scoped>
.page503 {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 48px 15px 48px;
  text-align: center;

  img {
    width: 100%;
  }

  h1 {
    font-size: 42px;
    margin: 25px 0;
    font-weight: 500;
    line-height: 1.2;
  }

  .caption-text {
    font-size: 15px;
    line-height: 24px;
    color: #7d8b9b;
  }

  a {
    display: inline-block;
    margin-top: 0.96rem;
    border-radius: 2rem;
    font-size: 0.26rem;
    font-weight: bold;
    letter-spacing: 0.02rem;
    padding: 0.34rem 0.78rem;
    text-shadow: 0.02rem 0.02rem 0.02rem rgba(0, 0, 0, 0.14);
    text-transform: uppercase;
    box-shadow: 0 0.08rem 0.18rem 0 rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(135deg, #5a7ce2 0%, #8283e8 50%, #5c5de8 51%, #565bd8 71%, #575cdb 100%);
    animation: AnimationName 3s ease infinite;
    color: #fff;
    background-size: 400% 400%;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }

  @keyframes AnimationName {
    0% {
      background-position: 0% 31%
    }
    50% {
      background-position: 100% 70%
    }
    100% {
      background-position: 0% 31%
    }
  }
}
</style>
